<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>场次选择</title>
   <!--移动端meta设置 开始-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body class="fground mhome">
    <div class=" ">        
        <section class="xh-toggle-select clearfix pt5">  
            <!-- 场次预定 S-->
            <div class="select-day-wrap clearfix">
              <div class="wrap-week naative-auto ">
                    <ul class="xp-select-box clearfix">
                        <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                        <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                         <li>
                            <h4 class="week-title mt5">周四</h4> 
                            <p class="date-days">09月01日</p>
                            <span class="week-btns">预定</span>    
                        </li>
                       
                    </ul>
               </div> 
            </div>
            <!-- 场次预定 E-->
        </section>
    </div>
    <!-- 球场列表 S-->
    <div class="xp-teams-lists pt50 pb50">
        <div class="clearfix team-after pr">
            <span class="fzrem0 xp-week-date pa">9:00-11:30</span>
            <div class="flexbox wp7b fr">
                <div class="flexbox-1 teams-boxs pr">
                    <p class="pa field-team">
                        1号普通场7人
                    </p>
                    <p class="wp9">
                        <img src="image/yuezhanzhong_03.jpg" width="100%"> 
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                    <p class="pa field-team">
                        1号普通场7人
                    </p>
                    <p class="wp9">
                        <img src="image/zhunbeizhong_05.jpg" width="100%">
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                    <p class="pa field-team">
                        1号普通场7人
                    </p>
                    <p class="wp9">
                        <img src="image/dengdaizhong_07.jpg" width="100%">
                    </p> 
                </div>
            </div>
        </div>
        <div class="clearfix pr">
            <span class="fzrem0 xp-week-date pa">9:00-11:30</span>
            <div class="flexbox wp7b fr">
                <div class="flexbox-1 teams-boxs pr">
                    
                    <p class="wp9">
                        <img src="image/yuezhanzhong_03.jpg" width="100%"> 
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/zhunbeizhong_05.jpg" width="100%">
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/dengdaizhong_07.jpg" width="100%">
                    </p> 
                </div>
            </div>
        </div>
        <div class="clearfix pr">
            <span class="fzrem0 xp-week-date pa">9:00-11:30</span>
            <div class="flexbox wp7b fr">
                <div class="flexbox-1 teams-boxs pr">
                    
                    <p class="wp9">
                        <img src="image/yuezhanzhong_03.jpg" width="100%"> 
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/zhunbeizhong_05.jpg" width="100%">
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/dengdaizhong_07.jpg" width="100%">
                    </p> 
                </div>
            </div>
        </div>
        <div class="clearfix pr">
            <span class="fzrem0 xp-week-date pa">9:00-11:30</span>
            <div class="flexbox wp7b fr">
                <div class="flexbox-1 teams-boxs pr">
                    
                    <p class="wp9">
                        <img src="image/yuezhanzhong_03.jpg" width="100%"> 
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/zhunbeizhong_05.jpg" width="100%">
                    </p>
                </div>
                <div class="flexbox-1 teams-boxs pr">
                   
                    <p class="wp9">
                        <img src="image/dengdaizhong_07.jpg" width="100%">
                    </p> 
                </div>
            </div>
        </div>
    </div>
    <!-- 球场列表 E--> 
    <div class="tc">
        <p>2号普通场7人9:00-11:30</p>
        <span style="color:#f76900">￥1000,00</span>    
    </div>
    <!-- 按钮 S-->
    <div class="mt20 pl5 pr5 fground pt20 pb50 ui-button-box">
        <span class="ui-buttons-tame">
            预定场地
        </span>
    </div>
    <!-- 按钮 E-->
    <!-- 底部导航 S-->
    <div class="nav-tabs">
        <div class="nav-items">
            <a href="javascript:void(0)">
                <p class="pt10 pb10">
                    <i class="icon-panel">
                        <img src="image/nav-home.png" width="100%">
                    </i>
                    <span class="fzrem">首页</span>
                </p>
            </a>
        </div>
        <div class="nav-items">
            <a href="javascript:void(0)">
                <p class="pt10 pb10">
                    <i class="icon-panel">
                        <img src="image/nav-clueb.png" width="100%">
                    </i>
                    <span class="fzrem">球队</span>
                </p>
            </a>
        </div>
        <div class="nav-items">
            <a href="javascript:void(0)">
                <p class="pt10 pb10">
                    <i class="icon-panel">
                        <img src="image/nav-list.png" width="100%">
                    </i>
                    <span class="fzrem">订单</span>
                </p>
            </a>
        </div>
        <div class="nav-items">
            <a href="javascript:void(0)">
                <p class="pt10 pb10">
                    <i class="icon-panel">
                        <img src="image/nav-my.png" width="100%">
                    </i>
                    <span class="fzrem">我的</span>
                </p>
            </a>
        </div>
    </div>
    <!--底部导航 E-->
<body>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $.fn.arrWidth = function(){
            var $this = $(this)
            var  arrDom= $this.children()
            var arrWidth= arrDom.length*arrDom.width()+ arrDom.length*12;
            $this.width(arrWidth);
        }     
        $(".xp-select-box").arrWidth();
     
    })
</script>
</body>
</html>